<template>
  <div>
    <ul>
      <li>Vue JSTree - 全功能，树状单选多选，可拖拽，过滤搜索</li>
      <li>Vue Draggable Nested Tree - 纯树形选择，轻盈趁手</li>
      <li>Vue Tree List Component - 前端可编辑、删除，拖拽，界面友好</li>
      <li>Vue Tree select - 基础款树形选择器，没有多余功能</li>
      <li>Vue Tree Chart - 传图树形选择器 UI 适合展示树状关系</li>
      <li>Vue Liquor Tree - 移动端友好，可拖拽，灵活配置</li>
      <li>V-TreeView - 基础款树形选择器，可换 icon，可过滤搜索</li>
    </ul>

    <div class="editable_tree_demo_div">
      <EditableTree ref="groupTree" :isShowFilter="true" :editable="true" :isEditNode="false" :isRename="true" :isDelete="true" :props="{ isDirectory: 'isGroup' }" :treeData="editTree.data" :isDefaultExpandAll="false" :defaultExpandKeys="editTree.defaultExpandedKeys" :isShowCount="false" :isDraggable="true" :isDragFolders="true" :treeLoading="editTree.treeLoading" :defaultSelectKey="editTree.defaultSelectKey" :onlyPutNext="true" :isPutChild="true" @handleNodeClick="handleGroupTreeNodeClick" @handleUpdateTreeData="handleGroupTreeNodeUpdate" @handleDeleteTreeData="handleDeleteTreeData" @handleDragEnd="handleDragEnd"></EditableTree>
    </div>

  </div>
</template>

<script>
import EditableTree from '@/components/editableTree/EditableTree'
import editableTree from '@/common/apiData/editableTree.json'

export default {
  components: {
    EditableTree
  },
  data () {
    return {
      editTree: {
        data: editableTree.data,
        defaultExpandedKeys: [],
        defaultSelectKey: "",
        treeLoading: false
      }
    }
  },
  methods: {
    handleGroupTreeNodeClick () {
    },
    /**
     * 可编辑树修改节点后触发
     * @node 被修改后的节点
     * @type 操作类型：add新增节点；rename重命名
     */
    handleGroupTreeNodeUpdate (data = {
      node: null,
      type: ""
    }) {
      console.log("handleGroupTreeNodeUpdate", data);
    },
    /**
     * 可编辑树删除节点后触发
     * @param 被删除的节点
     */
    handleDeleteTreeData (node) {
      console.log("handleDeleteTreeData", node);
    },
    /**
     * 树节点被拖拽释放时触发
     * node：被拖拽的节点
     * intoNode：拖拽节点放置到哪个节点下
     * location：放的位置
     * event：拖拽事件
     */
    handleDragEnd (node, intoNode, location, event) {
      console.log("handleDragEnd", node, intoNode, location, event)
    }
  }
}
</script>

<style lang="less" scoped>
.editable_tree_demo_div {
  border: 1px black solid;
  max-width: 500px;
  height: 800px;
  overflow-y: auto;
}
</style>